<template>
    <Header></Header>
    <div class="article-details">
        <div class="container">
            <div class="header">
                <div class="title">
                    <p>{{ articleDetails?.title }}</p>
                </div>
            </div>
            <div class="content">
                <div class="img">
                    <img :src="articleDetails?.imagrUrl" alt="" />
                </div>
                <quill-editor contentType="html" :options="editorOption" :content="articleDetails?.content" :readOnly="true"></quill-editor>
            </div>
            <div class="comment-content">
                <div class="title">
                    <p>评论({{ commentList?.length }})</p>
                </div>
                <div class="post-comment">
                    <div class="comment-input">
                        <el-input v-model="commentContent" :rows="4" type="textarea" placeholder="有想法? 来和大家聊聊吧" resize="none"></el-input>
                    </div>
                    <div class="post">
                        <el-button @click="postComment" type="primary">发布评论</el-button>
                    </div>
                </div>
                <div class="comment-list">
                    <div class="tools">
                        <div class="left-count">
                            <p>
                                <span>{{ commentList?.length }}</span
                                >个评论
                            </p>
                        </div>
                        <!-- <div class="right-sort">
                            <div class="time">
                                <p @click="changeSortIndex('倒序')" :class="{ selected: sortIndex === '倒序' }">( 按时间倒序 · &nbsp</p>
                                <p @click="changeSortIndex('正序')" :class="{ selected: sortIndex === '正序' }">按时间正序 )</p>
                            </div>
                        </div> -->
                    </div>
                    <div class="list">
                        <comment-item @replayComment="reloadCommentList" v-for="d in commentList" :key="d.pushTime" :data="d"> </comment-item>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <Footer></Footer>
</template>

<script setup lang="ts">
import { ArticleDetailsInfo, getArticleDetailsInfoAPI } from "@/api/article";
import { getDetailCommentAPI, sendCommentAPI } from "@/api/comment";
import type { commentItem, SendCommentParams } from "@/types/api/comment";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import CommentItem from "@/components/Details/CommentList.vue";
import { ElMessage } from "element-plus";
import { QuillEditor, Quill } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";

const route = useRoute();
const articleDetails = ref<ArticleDetailsInfo>();
const commentList = ref<commentItem[]>();
const commentContent = ref();

const editorOption = {
    modules: {
        toolbar: false, // 这里将工具栏隐藏
    },
};
async function postComment() {
    let { contestId, type } = route.query;
    type = type as string;
    contestId = contestId as string;
    const data: SendCommentParams = {
        activityId: contestId,
        content: commentContent.value,
        type,
        rootId: "",
        toCommentId: "",
        toCommentUserId: "",
    };
    const res = await sendCommentAPI(data);
    if (res.data.code === 200) {
        await getCommentList();
        ElMessage({
            message: "发布评论成功",
            type: "success",
        });
    }
}
// 子组件回复了刷新评论列表数据
function reloadCommentList() {
    getCommentList();
}
async function getArticleDetailsInfo() {
    const res = await getArticleDetailsInfoAPI(route.query.contestId as string);
    articleDetails.value = res.data.data;
}
async function getCommentList() {
    const contestId = route.query.contestId as string;
    const res = await getDetailCommentAPI(1, 10, contestId, 2);
    commentList.value = res.data.data;
}

onMounted(async () => {
    await getArticleDetailsInfo();
    await getCommentList();
});
</script>

<style lang="scss" scoped>
:deep(.ql-container.ql-snow) {
    border: none;
}
.article-details {
    .container {
        width: 60%;
        border: 1px solid #eee;
        padding: 20px;
        margin-top: 50px;
        .header {
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
            .title {
                font-size: 40px;
            }
        }
        .content {
            padding: 20px;
            .inner {
                margin-top: 20px;
            }
        }
        .comment-content {
            margin-top: 50px;
            width: 100%;
            .title {
                font-size: 21px;
                padding-left: 10px;
                border-left: 4px solid $main-color;
                color: #666;
            }
            .post-comment {
                margin-top: 20px;
                .post {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    margin-top: 20px;
                }
            }
            .comment-list {
                margin-top: 20px;
                .tools {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    font-size: 12px;
                    color: #666;
                    padding: 20px 0;
                    border-top: 1px solid #e6e6e6;
                    border-bottom: 1px solid #e6e6e6;
                    .left-count {
                        span {
                            color: $main-color;
                        }
                    }
                    .right-sort {
                        margin-left: 10px;
                        > div {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            p {
                                cursor: pointer;
                            }
                            .selected {
                                color: $main-color;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
